<template>
  <div class="assets">
    <div class="assets-top">
      <span><van-icon name="arrow-left"/></span>
      <span>美团红包</span>
    </div>
    <div class="assets-data">
      <van-collapse v-model="activeNames">
        <div class="assets-list" v-for="(itme) in list" :key="itme">
          <div class="list-top">
            <div class="list-left">
              <span>{{ itme.cashCouponName }}</span>
              <span>有效期至{{ itme.deadline }}</span>
            </div>
            <div class="list-right">
              <span><span>￥</span><span class="right-jine">{{ itme.preferentialAmount }}</span></span>
              <span>满{{ itme.threshold }}可用</span>
            </div>
          </div>
          <van-divider class="xuxian" dashed :style="{borderColor: '#000000'}"></van-divider>
          <div class="list-bottom">
            <van-collapse-item class="list-jieshao" title="使用介绍">
              {{ itme.introductionToUse }}
            </van-collapse-item>
            <van-button class="list-botton" @click="getQuShiYong()" type="danger">去使用</van-button>
          </div>
        </div>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue';

export default {
  name: "MyAssetsList",
  data() {
    return {
      list: [],
      activeNames: ref(['0'])
    }
  },
  mounted() {
    this.getMyAssetsList();
    this.getCurrentTime();
  },
  methods: {
    getMyAssetsList() {
      this.$axios.get('/assets/assetsSel', {
        params: {
          id: 1
        }
      })
          .then(res => {
            this.list = res.result.select.filter(item => {
              if (item.shopId == 0 && item.expired == false) {
                return true;
              }
            });
            console.log(this.list);
          })
    },
    getMyAssetsUpd(deadline) {
      this.$axios.get('/assets/assetsUpd', {
        params: {
          userId: 1,
          deadline: deadline
        }
      })
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      this.getMyAssetsUpd(_this.gettime);
    },
    getQuShiYong(){
      this.$router.push('/shopDishesList');
    }
  }
}
</script>

<style scoped>
.assets {
  background: #F2F2F2;
  display: flex;
  flex-direction: column;
  font-family: "楷体";
}

.assets-top {
  height: 30px;
  width: 100%;
  background: #FFFFFF;
  position: fixed;
  top: 0;
}

.assets-top span:nth-of-type(1) {
  margin-left: 20px;
  margin-right: 20px;
}

.assets-top span:nth-of-type(2) {
  font-weight: 700;
}

.right-jine {
  font-size: 28px;
}

.assets-data {
  margin-top: 50px;
}

.assets-list {
  background: #FFFFFF;
  height: 140px;
  width: 360px;
  border-radius: 10px;
  margin: auto;
  margin-bottom: 10px;
}

.list-top {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
}

.list-left {
  display: flex;
  flex-direction: column;
}

.list-left span:nth-of-type(1) {
  font-size: 20px;
  font-weight: bold;
}

.list-left span:nth-of-type(2) {
  font-size: 14px;
  font-weight: 500;
}

.list-right {
  color: red;
  display: flex;
  flex-direction: column;
  margin-left: 200px;
}

.xuxian {
  width: 90%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.list-bottom {
  display: flex;
  flex-direction: row;
}

.list-jieshao {
  width: 270px;
  border-radius: 10px;
}

.list-botton {
  height: 30px;
  width: 75px;
  border-radius: 10px;
}
</style>